<template>
	<view class="main">
		<view style="margin: 50rpx auto;width: 200rpx;">
			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="chooseImg">
				<view style="margin-bottom: 10rpx;" class="flex flex-jc-c flex-dir-c">
					<u-image border-radius="50%" width="162rpx" height="162rpx" :src="inits.tempFilePaths"></u-image>
					<view style="color: #333333;font-size: 28rpx;" v-if="!inits.tempFilePaths">请上传头像</view>
				</view>
			</button>
		</view>
		<view class="ml-30 font-24" style="margin-top: 51rpx;">请务必填写本人真实信息，以保障权益正确发放</view>
		<view class="info">
			<view class="flex flex-ai-c flex-jc-sb card">
				<view class="card-title">会员名</view>
				<view class="flex">
					<u-input v-model="inits.userinfo.auth_name" @blur="(e) => onBlur(e,'auth_name')" inputAlign="right"
						:border="false" placeholder="请填写您的会员名"></u-input>
						<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>
			<view class="flex flex-ai-c flex-jc-sb card">
				<view class="card-title">证件号</view>
				<view class="flex">
					<u-input v-model="inits.userinfo.id_number" @blur="(e) => onBlur(e,'id_number')" inputAlign="right"
						:border="false" placeholder="请填写您的证件号"></u-input>
						<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>
			<view class="flex flex-ai-c flex-jc-sb card">
				<view class="card-title">手机号</view>
				<view class="flex">
					<button @getphonenumber="formSubmit" open-type="getPhoneNumber"
						type="primary" formType="submit">
						<view class="flex flex-ai-c flex-jc-c" style="color: #333333;">{{inits.userinfo.phone?inits.userinfo.phone:'授权手机号'}}</view>
					</button>
					<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>
			<view class="flex flex-ai-c flex-jc-sb card">
				<view class="card-title">邮箱号</view>
				<view class="flex">
					<u-input v-model="inits.userinfo.email" @blur="(e) => onBlur(e,'email')" inputAlign="right"
						:border="false" placeholder="请填写您的邮箱号"></u-input>
						<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>
		</view>
		<view class="ml-30 font-24" style="margin-top: 51rpx;">昵称与头像会展示在个人中心分享海报等内容上</view>
		<view class="info">
			<view class="flex flex-ai-c flex-jc-sb card">
				<view class="card-title">昵称</view>
				<view class="flex">
					<u-input v-model="inits.userinfo.nickname" @blur="(e) => onBlur(e,'nickname')" inputAlign="right"
						:border="false" placeholder="请填写您的昵称"></u-input>
						<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>
			<view class="flex flex-ai-c flex-jc-sb card" @click="inits.sexShow = true">
				<view class="card-title">性别</view>
				<view class="flex">
					<view>{{filterSex(inits.userinfo.sex)}}</view>
					<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>
			<view class="flex flex-ai-c flex-jc-sb card">
				<view class="card-title">生日</view>
				<view @click="inits.dateShow = true" class="flex flex-ai-c">
					<view class="text">{{inits.userinfo.birthday ? inits.userinfo.birthday : '请选择'}}</view>
					<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>
		</view>
		
		<view style="padding: 50rpx 0 80rpx 0">
			<view
				style="height: 100rpx;background: #fff;line-height: 100rpx;text-align: center;color: #333333;font-size: 26rpx;color: #FE2600;"
				@click="logout">退出登录</view>
		</view>
	</view>
	<u-select @confirm="confirmSex" v-model="inits.sexShow" :list="inits.sexColumns"></u-select>
	<u-picker mode="time" v-model="inits.dateShow" :params="params" @confirm="confirmTime"></u-picker>
</template>

<script lang="ts" setup>
	import {
		reactive
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import user from '../../api/user.js';
	import common from '../../api/common.js';
	const params = reactive({
		year: true,
		month: true,
		day: true,
		hour: false,
		minute: false,
		second: false
	})
	const inits = reactive({
		userinfo: {
			auth_name: '',
			nickname: '',
			id_number: '',
			phone: '',
			email: '',
			sex: '',
			birthday: '',
			headavatar: '',
			id: null
		},
		tempFilePaths: '',
		newUserinfo: {birthday: '',sex: null},
		dateShow: false,
		sexShow: false,
		sexColumns: [{
			label: '男',
			value: 1
		}, {
			label: '女',
			value: 2
		}],
	})
	
	const onBlur = (e: string, type: string) => {
		if (inits.newUserinfo[type] == e) return
		editMemberInfo({
			[type]: e
		}, type, e)
	}
	//
	const confirmSex = (e) => {
		inits.userinfo.sex = e[0].value
		if (inits.newUserinfo.sex == e[0].value) return
		editMemberInfo({
			sex: e[0].value
		}, 'sex', e[0].value)
	}
	// 选择时间
	const confirmTime = (e : any) => {
		let date = `${e.year}-${e.month}-${e.day}`
		inits.userinfo.birthday = date
		if (inits.newUserinfo.birthday == date) return
		editMemberInfo({
			birthday: date
		}, 'birthday', date)
	}
	const editMemberInfo = (info : any, type ?: string | number, e ?: string | number) => {
		uni.showLoading()
		info.id = inits.userinfo.id
		user.editMemberInfo(info).then((res) => {
			if (res.code === 200) {
				if (type) inits.newUserinfo[type] = e
			} else {
				inits.userinfo[type] = inits.newUserinfo[type]
			}
			uni.hideLoading()
		}).catch(() => {
			uni.hideLoading()
			inits.userinfo[type] = inits.newUserinfo[type]
		})
	
	}
	const filterSex = (v: string | number) => {
		let text = ''
		switch (Number(v)) {
			case 1:
				text = '男'
				break
			case 2:
				text = '女'
				break
			default: {
				text = '请选择性别'
			}
		}
		return text
	}
	const getMemberInfo = async () => {
		const res = await user.getMemberInfo()
		if (res.code == 200) {
			inits.userinfo = res.data
			inits.newUserinfo = JSON.parse(JSON.stringify(res.data))
			inits.tempFilePaths = res.data.headavatar || ''
		}
	}
	const formSubmit = async (e: any) => {
		if (!e.detail.code) {
			return
		}
		const res = await user.getPhoneNumber({
			code: e.detail.code
		})
		inits.userinfo.phone = res.data.phoneNumber
	}
	const logout = () => {
		setTimeout(() => {
			uni.removeStorageSync('token')
			uni.removeStorageSync('userInfo')
			uni.switchTab({
				url: '/pages/tabs/me'
			})
		}, 1000)
		
	}
	//选择微信头像
	const chooseImg = async (e) => {
		const {
			avatarUrl
		} = e.detail
		const res = await common.upload(avatarUrl)
		inits.userinfo.headavatar = res.data.url
		inits.tempFilePaths = res.data.domain_url
	}
	onLoad(() => {
		getMemberInfo()
	})
</script>
<style>
	page{
		background: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	.main {
		.info {
			margin: 20rpx 0 0 0;
		}
	
		.text {
			color: #999999;
			margin-right: 5rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			max-width: 340rpx;
		}
	
		.card {
			padding: 0 30rpx;
			height: 90rpx;
			background: #fff;
			font-size: 28rpx;
			color: #666666;
	
			.card-title {
				color: #333333;
			}
		}
	
	}
	:deep(.u-input) {
		border: none !important;
	}
	
	:deep(.uni-input-placeholder) {
		color: #999999 !important;
	}
	
	button {
		font-size: 28rpx;
		font-weight: 300;
		color: #999999;
		padding: 0;
		margin-right: 8rpx;
		background: none;
		width: 162rpx;
		
	}
	
	// 边框样式
	button::after {
		border: 0;
	}
</style>